<template>
  <div class="nicheng">
    <nav-bar
      class="user-changeInfo"
      title="个人信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <icon name="ellipsis" size="18" />
      </template>
    </nav-bar>

    <Form @submit="onSubmit">
      <cell-group inset>
        <field
          v-model="userName"
          name="userName"
          placeholder="设置个性昵称 (不超过20字符)"
          :rules="[{ required: true, message: '输入不正确' }]"
        />
      </cell-group>
      <div class="login-router-link">
        <p>昵称由中文.英文.数字.和_组成</p>
      </div>
      <div style="margin: 16px">
        <Button round block type="primary" native-type="submit"
          >确认修改昵称</Button
        >
      </div>
    </Form>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Form, Field, CellGroup, NavBar, Toast, Icon, Button } from "vant";
import { useInfoAPI, changeInfoAPI } from "../../services/auth";
const { push } = useRouter();
const onClickLeft = () => {
  push({
    name: "changeInfo",
  });
};
const onClickRight = () => Toast("加入");
const userName = ref("");
const userList = ref({});
const onSubmit = (values) => {
  console.log("submit", values);
  // 修改个人信息
  changeInfoAPI({ nickName: values.userName }).then((res) => {
    if (res.code === 1) {
      Toast.success(res.data);
      setTimeout(() => {
        push({
          name: "changeInfo",
        });
      }, 2000);
      userName.value = "";
    }
  });
};
// 获取个人信息
// useInfoAPI().then((res) => {
//   // console.log(res.code);
//   if (res.code) {
//     userList.value = res.data;
//   }
// });
</script>
